<template>
  <div class="avue-sidebar">
    <!-- <logo /> -->
    <el-scrollbar style="height:100%">
      <!-- <div
        v-if="validatenull(menu)"
        class="avue-sidebar--tip"
      >{{ $t('menuTip') }}
      </div> -->
      <el-menu
        :default-active="nowTagValue"
        :show-timeout="200"
        :collapse="keyCollapse"
        mode="vertical"
        :router="true"
      >
        <!-- <sidebar-item
          :menu="sideBarMenu"
          :screen="screen"
          :props="website.menu.props"
          :collapse="keyCollapse"
          first
        /> -->
        <!-- <el-submenu index="1">
          <template slot="title">
            <i class="menu-icon menu-icon1" />
            <span>菜单管理</span>
          </template>
          <el-menu-item index="/MenuManagement/MenuConfig">
            菜单配置
          </el-menu-item>
        </el-submenu> -->
        <!-- <el-submenu index="2">
          <template slot="title">
            <i class="menu-icon menu-icon2" />
            <span>任务管理</span>
          </template>
          <el-menu-item index="/TaskManagement/TaskLabelManagement">
            任务标签管理
          </el-menu-item>
          <el-menu-item index="/TaskManagement/TaskSourceManagement">
            任务来源管理
          </el-menu-item>
        </el-submenu> -->
        <el-submenu index="3">
          <template slot="title">
            <i class="menu-icon menu-icon2" />
            <span>接入管理</span>
          </template>
          <el-menu-item index="/AccessManagement/Applications">
            应用及模块接入
          </el-menu-item>
          <el-menu-item index="/AccessManagement/ToDoTask">
            任务中心接入
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import logo from '../logo'
// import sidebarItem from './sidebarItem'
// import { formatRoutes } from '@/router/router'

export default {
  name: 'Sidebar',
  // components: { sidebarItem },
  inject: ['index'],
  data() {
    return {
      sideBarMenu: [],
      active: '1-1'
    }
  },
  computed: {
    ...mapGetters(['website', 'menu', 'tag', 'keyCollapse', 'screen', 'menuId']),
    nowTagValue: function() {
      return this.$router.$avueRouter.getValue(this.$route)
    }
  },
  watch: {
    menu: {
      immediate: true,
      handler(val) {
        // formatRoutes()

        // this.sideBarMenu = this.filterMenu(val)
      }
    }
  },
  created() {
    // this.index.openMenu(this.menuId)
  },

  mounted() {
  },
  methods: {
    filterMenu(list) {
      let arr = []
      arr = list.filter(item => {
        if (item.children && item.children.length) {
          item.children = this.filterMenu(item.children)
        }
        return item.category === 1
      })
      return arr
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px !important;
}
.menu-icon.menu-icon1 {
  background: url('../../../assets/images/menu-icon1.png');
  background-size: 100% 100%;
}

.menu-icon.menu-icon2 {
  background: url('../../../assets/images/menu-icon2.png');
  background-size: 100% 100%;
}
</style>
